<template>
	<div class = "comment">
		<h3>评论内容</h3>
		<ul>
			<li v-for = "item in list" :key = "item.id">
				<div class = "top">
					<img :src="item.user.web_url" alt="">
					<span class = "user_name">{{item.user.user_name}}</span>
					<span class = "created_at">{{item.created_at}}</span>
				</div>
				<div class="main">
					<p class = "quote" v-if = "item.quote">{{item.quote}}</p>
					<p class = "content">{{item.content}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
import axios from "axios"
export default {
	name : 'comment',
	props: ['type','id'],
	data () {
		return {
			list : []
		}
	},
	methods : {
		getDate () {
			axios.get("http://v3.wufazhuce.com:8000/api/comment/praiseandtime/"+this.type+"/"+this.id+"/0").then(this.getDateSucc);
		},
		getDateSucc (res) {
			console.log(this.type,this.id)
			if(res.data.res === 0 && res.data.data){
				this.list = res.data.data.data.slice(0,3);
			}
		}
	},
	mounted () {
		this.getDate();
	}
}
</script>

<style lang = "less" scoped>
	.comment {
		padding:0 .4rem;
		h3 {
			width: 1.4rem;
		    border-bottom: .06rem solid #000;
		    padding-bottom: .4rem;
		    font-size: .3rem;
		    margin-bottom:.2rem;
		}
		ul {
			li {
				border-bottom:1px solid #eee;
				padding-top:.2rem;
				>.top {
					margin-bottom:.4rem;
					>img {
						width:.32rem;
						height:.32rem;
						border-radius: 50%;
						vertical-align: middle;
					}
					span {
						color:#808080;
					}
					// .user_name,
					.created_at {
						float:right;
					}
				}
				.main {
					padding-left:.4rem;
					font-size:.3rem;
					.quote {
						border:1px solid #d2d2d2;
						margin-bottom:.4rem;
						padding:.2rem;
					}
					.content {
						margin-bottom:.4rem;
						line-height:.46rem;
					}
				}
			}
		}
	}
</style>